<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
	
			li{
				float: left;
				font-size: 30px;
				display: inline;
				width: 20%;
				background:black;
			}
			a{
			color:white;
			}

			.one:hover{}
            .two:hover{color:greenyellow;}
            .three:hover{font-style:italic;}
            .four:hover{background-color:pink;}
            .five:hover{font-family:Serif;}
            
            .one{
            position:relative;
            display:inlineine-bloc;
}

            .game{
            display:none;
            position: absolute;
			top:53px;
            background-color:aquamarine;
            min-width:120px;
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.3);
            padding: 10px 12px;
			z-index:1000;
  }
  .one:hover .game{display:block;}
            
           .two{
            	position: relative;
           
            }
            .news{
            	display: none;
            	position: absolute;
				top:53px;
            	background:yellow;
            	min-width: 120px;
            	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
				padding:10px 12px
				z-index:1000;
            }
            .two:hover .news{
            	display: block;
            }
	
	        .three{
			position:relative;
			}
			.picture{
			display:none;
			position:absolute;
			top:53px;
			background:pink;
			mid-width:120px;
			box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2);
			padding:10px 12px;
			z-index:1000;
			}
			.three:hover .picture{
			display:block;
			}
			 .four{
            	position: relative;
           
            }
            .shopping{
            	display: none;
            	position: absolute;
				top:53px;
            	background:yellow;
            	min-width: 120px;
            	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
				padding:10px 12px
				z-index:1000;
            }
            .four:hover .shopping{
            	display: block;
            }
			 .five{
            	position: relative;
           
            }
            .vedio{
            	display: none;
            	position: absolute;
				top:53px;
            	background:cyan;
            	min-width: 120px;
            	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
				padding:10px 12px
				z-index:1000;
            }
            .five:hover .vedio{
            	display: block;
            }
		</style>
	</head>
	<body>
<ul>
	
    <li class="one"><a href="#">游戏</a>
	<div class="game">
	<p><a href="#">LOL</a></p>
	<p><a href="#">绝地求生</a></p>
	</div>
	</li>
	
	
	
	
	<li class="two"><a href="#">资讯</a>
	<div class="news">
	<p><a href="#">世界杯</a></p>
	<p><a href="#">财经新闻</a></p>
	</div>
	</li>
	
	
	
	<li class="three"><a href="#" >图片</a>
	<div class="picture">
	<p><a href="#">美食</a></p>
	<p><a href="#">旅游</a></p>
	</div>
	</li>
	
	
	<li class="four"><a href="#" >购物</a>
	<div class="shopping">
	<p><a href="#">电器商品</a></p>
	<p><a href="#">奢侈品</a></p>
	</div>
	</li>
	<li class="five"><a href="#" >视频</a>
	<div class="vedio">
	<p><a href="#">腾讯视频</a></p>
	<p><a href="#">优酷视频</a></p>
	</div>
	</li>
</ul>




	</body>
</html>
